<template>
  <q-dialog v-model="visible">
    <q-card :dark="ui.isDark" style="min-width: 400px">
      <q-card-section class="row">
        <div class="text-h6">
          {{ point.id ? t(lang + "编辑点位") : t(lang + "新建点位") }}
        </div>
        <q-space />
        <q-toggle
          v-if="needSwitch"
          v-model="isShow"
          checked-icon="check"
          color="red"
          :label="t(lang + '默认显示')"
          unchecked-icon="clear"
        />
      </q-card-section>
      <q-card-section class="q-px-md">
        <q-input
          class="full-width"
          :dark="ui.isDark"
          outlined
          v-model="point.id"
          label="id"
          readonly
        />
      </q-card-section>
      <q-card-actions class="q-pt-none q-px-md">
        <q-input
          v-if="point.type !== 'charger'"
          class="full-width"
          :dark="ui.isDark"
          outlined
          v-model="point.name"
          :label="t(lang + '点位名称')"
        />
        <q-select
          v-else
          class="full-width"
          :dark="ui.isDark"
          outlined
          v-model="point.name"
          :label="t(lang + '点位名称')"
          :options="chargerList"
        />
      </q-card-actions>

      <q-card-section class="q-px-md">
        <q-select
          :dark="ui.isDark"
          outlined
          v-model="point.type"
          :options="pointOptions"
          map-options
          emit-value
          :label="t(lang + '点位类型可不选')"
        >
          <template v-slot:append>
            <q-icon
              v-if="point.type"
              class="cursor-pointer"
              name="clear"
              @click.stop.prevent="point.type = null"
            />
          </template>
        </q-select>
      </q-card-section>

      <q-card-section class="q-px-md">
        <q-select
          :dark="ui.isDark"
          outlined
          v-model="point.turnable"
          :options="[
            { label: 'true', value: true },
            { label: 'false', value: false },
          ]"
          :label="t(lang + '是否可转')"
          map-options
          emit-value
        />
      </q-card-section>

      <q-card-section class="q-px-md row q-gutter-x-sm">
        <q-input
          class="col"
          :dark="ui.isDark"
          outlined
          v-model.number="point.pose.position.x"
          label="x"
          type="tel"
        />
        <q-input
          class="col"
          :dark="ui.isDark"
          outlined
          v-model.number="point.pose.position.y"
          label="y"
          type="tel"
        />
      </q-card-section>

      <q-card-actions align="right" class="q-px-md">
        <q-btn no-caps :label="t(lang + '取消')" v-close-popup />
        <q-btn
          no-caps
          :label="t(lang + '修改')"
          :class="ui.btnClass"
          v-if="point.id"
          @click="editPoint"
        />
        <q-btn
          no-caps
          :label="t(lang + '创建')"
          :class="ui.btnClass"
          v-else
          @click="createPoint"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import { useUiStore } from "stores/ui";
import { useI18n } from "vue-i18n";
import { useAPIStore } from "stores/api";
import { api } from "boot/axios";

defineExpose({
  show,
  close,
});
const emit = defineEmits(["createPoint", "editPoint", "switchChange"]);
const props = defineProps({
  needSwitch: {
    // 是否需要开始右上角开关
    type: Boolean,
    default: false,
  },
  switchStatus: {
    // 开关状态
    type: Boolean,
    default: false,
  },
});

const t = useI18n().t;
const lang = "MapEdit.PointEditBig.";
const ui = useUiStore();
const visible = ref(false);
const point = ref({
  id: "",
  name: "",
  type: "",
  turnable: true,
});
const isShow = ref(false);
const chargerList = ref([]);
const pointOptions = ref([
  {
    label: t(lang + "工位点立体库"),
    value: "station-port",
  },
  {
    label: t(lang + "库位点抓取"),
    value: "storage-catch",
  },
  {
    label: t(lang + "缓冲点"),
    value: "buffer",
  },
  {
    label: t(lang + "避让点"),
    value: "avoid",
  },
  {
    label: t(lang + "充电桩点位"),
    value: "charger",
  },
  {
    label: t(lang + "待命点"),
    value: "standby",
  },
  {
    label: t(lang + "停车位"),
    value: "parking-spot",
  },
]);

watch(visible, (val) => {
  if (val) {
    isShow.value = props.switchStatus;
  }
});

watch(isShow, (val) => {
  emit("switchChange", val);
});

function show(data) {
  if (data) {
    point.value = JSON.parse(JSON.stringify(data));
    console.log(data);
  } else {
    point.value = {
      id: "",
      name: "",
      type: "",
      turnable: true,
    };
  }
  api.get(useAPIStore().centerUrl + "charger/devices").then((rs) => {
    chargerList.value = rs.data.map((item) => {
      return item.id;
    });
  });
  visible.value = true;
}

function close() {
  visible.value = false;
}

function createPoint() {
  emit("createPoint", point);
}

function editPoint() {
  console.log(point.value);
  emit("editPoint", point);
}
</script>
